import React, { useEffect, useState } from 'react'
import { Col, Row, Card, Table } from 'antd'
import { getData } from '../../api'
import "./index.css"
import * as Icon from "@ant-design/icons";
import MyEcharts from '../../components/Echarts'


// 进行定义表格数据
const columns = [ 
  {
    title: '课程',
    dataIndex: 'name',
   
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy',
  
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy',
    
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy',
  }
]

// 进行创建卡片列表数据
const  countData = [
  {
    "name": "今日支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "今日收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "今日未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  },
  {
    "name": "本月支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "本月收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "本月未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  }
]

// 进行创建图表的icon图标
const iconToElement = (name) => React.createElement(Icon[name])


const Home = () => {
  // 进行引入主页面用户展示头像
  const userImg = require("../../assets/imgs/01.jpg")
  // 进行更新表格数据
  const [tabledata, setTableData] = useState([])
  // 进行更新图表数据
  const [echartData, setEChartData] = useState({})
  // useEffect 是React的Hook函数，用于在函数组件中进行执行副作用操作，如
  // 数据的获取，订阅事件，手动操作DOM事件
  useEffect(() => {
    // 进行获取数据
    getData().then(({data}) => {
      const {tableData,orderData,userData,videoData} = data.data
      // 更新表格数据
      setTableData(tableData)
      const order = orderData
      const xData = order.date
      // 数组列表里面的key值
      const keyArray = Object.keys(order.data[0])
      // 创建一个空的数组，用于存储结果
      const series = []
      keyArray.forEach(key => {
        series.push({
          name: key,
          type: 'line',
          data: order.data.map(item => item[key])
        })
      })
      setEChartData({
        ...echartData,
        // 订单数据
        order:{
          xData,
          series
        },
        // 用户数据
        user: {
          xData:userData.map(item => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map(item => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map(item => item.active),
              type: 'bar'
            }
          ]
        },
        //饼图数据
        video: {
         series:[
           {
             data:videoData,
             type:'pie'
           }
         ]
        }
      })
    })
  },[])
  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className='user'>
          <img src={userImg} />
          <div className='userInfo'>
               <p className="name">Admin</p>
               <p className="access">超级管理员</p>
          </div>
          </div>
          <div className="login-info">
            <span>上次登录时间：<span>2021-7-19</span></span>

            <span>上次登录地点：<span>武汉</span></span>
          </div>
        </Card>
        {/*表格组件 */}
        <Card  style={{marginTop: 20}} hoverable>
          <Table  rowKey={"name"} columns={columns} dataSource={tabledata} pagination={false}></Table>
        </Card >
      </Col>
      {/* 进行布局右边的Echarts图表数据 */}
      <Col span={16} style={{marginTop:'20px'}}>
        {/* 上边的卡片列表数据 */}
        <div className='num'>
          {
            // 进行卡片列表数据的循环遍历
            countData.map((item,index)=> {
              return (
                <Card key={index}>
                  <div className="icon-box" style={{background: item.color}}>
                  {iconToElement(item.icon)}
                  </div>
                  <div className='detail'>
                        <p className="num">￥{item.value}</p>
                        <p className="txt">{item.name}</p>
                  </div>
                </Card>
              )
            })
          }
        </div>
        {/* 中间的折线图数据 */}
        {echartData.order && <MyEcharts chartData={echartData.order}  style={{ height: '280px' }}/>}

        {/* 底部的饼图与柱状图数据 */}
        <div className="graph">
          { echartData.user && <MyEcharts chartData={echartData.user} style={{ width: '50%', height: '240px' }} /> }
          { echartData.video && <MyEcharts chartData={echartData.video} isAxisChart={false} style={{ width: '50%', height: '260px' }} /> }
        </div>
      </Col>
    </Row>
  )
}

export default Home